<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>产品管理</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="normal-list-page-hd clearfix">
                        <Button-group>
                          <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                            删除
                          </Button>
                          <Button custom-icon="iconfont icon-fangkuai2" size="small" type="primary" @click="showCreateModal">
                            新建
                          </Button>
                        </Button-group>
                    </div>
                    <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" @on-change="changePage" @on-page-size-change="onPageSizeChange" show-total show-sizer></Page>
                    </div>
                </div>

                <!--新建&修改-->
                <Modal v-model="modal.iotProduct.isShow" :loading="modal.iotProduct.loading" :mask-closable="false" :title="modal.iotProduct.title" @on-ok="postData">
                    <Form ref="systemFrom" :model="modal.iotProduct.formData" :rules="modal.iotProduct.rules" :label-width="120">
                        <!-- <FormItem label="所属用户ID"  prop="userid">
                            <Input placeholder="请输入所属用户ID" v-model="modal.iotProduct.formData.userid" style="width:300px;"/>
                        </FormItem> -->
                        <FormItem label="产品名称"  prop="productName">
                            <Input placeholder="请输入产品名称" v-model="modal.iotProduct.formData.productName" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="产品行业"  prop="ptype">
                            <Select v-model="modal.iotProduct.formData.ptype" style="width:100px">
                                <Option v-for="item in industryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                            <!-- <Input placeholder="智能家居、车联等" v-model="modal.iotProduct.formData.ptype" style="width:300px;"/> -->
                        </FormItem>
                        <FormItem label="产品类别"  prop="type">
                            <Select v-model="modal.iotProduct.formData.type" style="width:100px">
                                <Option v-for="item in productList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="移动Apikey"  prop="apikey">
                            <Input placeholder="移动Apikey" v-model="modal.iotProduct.formData.apikey" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="产品简介"  prop="description">
                            <Input v-model="modal.iotProduct.formData.description" type="textarea" placeholder="请输入产品简介..." style="width:300px;"/>
                        </FormItem>
                        <FormItem label="操作系统"  prop="os">
                            <RadioGroup v-model="modal.iotProduct.formData.os">
                                <Radio label="linux"></Radio>
                                <Radio label="android"></Radio>
                                <Radio label="vxworks"></Radio>
                                <Radio label="μC/OS"></Radio>
                                <Radio label="无"></Radio>
                                <Radio label="其他"></Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="网络运营商"  prop="ps">
                            <RadioGroup v-model="modal.iotProduct.formData.ps">
                                <Radio label="移动"></Radio>
                                <Radio label="电信"></Radio>
                                <Radio label="联通"></Radio>
                                <Radio label="其他"></Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="设备接入方式 "  prop="atype">
                            <RadioGroup v-model="modal.iotProduct.formData.atype">
                                <Radio label="公开协义"></Radio>
                                <Radio label="私有协义(RGMP)"></Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="联网方式 "  prop="ctype">
                            <RadioGroup v-model="modal.iotProduct.formData.ctype">
                                <Radio label="wifi"></Radio>
                                <Radio label="gprs"></Radio>
                                <Radio label="NB-IOT"></Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="接入协议"  prop="protocol">
                            <RadioGroup v-model="modal.iotProduct.formData.protocol">
                                <Radio label="Http"></Radio>
                                <Radio label="EDP"></Radio>
                                <Radio label="MQTT"></Radio>
                                <Radio label="Modbus"></Radio>
                                <Radio label="JT/T808"></Radio>
                                <Radio label="TCP透传"></Radio>
                                <Radio label="RTMP"></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
    import IotProductApi from "@/api/onenet/iotProduct.js";
    import moment from "moment";
    import { Message } from "iview";

    export default {
        name: "iotProduct",
        data() {
            return {
                 industryList: [

                    {
                        value: '1',
                        label: '智能家居'
                    },
                    {
                        value: '2',
                        label: '车联网'
                    },
                    {
                        value: '3',
                        label: '智能穿戴'
                    },
                    {
                        value: '4',
                        label: '智慧医疗'
                    },
                    {
                        value: '6',
                        label: '能源监控'
                    },
                    {
                        value: '8',
                        label: '智能教育'
                    },
                    {
                        value: '9',
                        label: '环境监控'
                    },
                    {
                        value: '12',
                        label: '工业制造'
                    },
                    {value: '13',label: '地质灾害' },
                    { value: '14 ', label: '共享设备' },
                    { value: '15 ', label: '智慧水务' },
                    { value: '16 ', label: '智慧电力' },
                    { value: '17 ', label: '智慧燃气' },
                    { value: '18 ', label: '智慧城市' },
                    { value: '19 ', label: '智慧安防' },
                    { value: '20 ', label: '智慧农业' },
                    { value: '21 ', label: '智慧养老' },
                    { value: '22 ', label: '智慧物流' },
                    { value: '23 ', label: '仓储管理' },
                    { value: '11 ', label: '其他' }
                ],
                productList: [
                    {value: '1',label: '家用电器' },
                    { value: '2', label: '办公设备' },
                    { value: '3', label: '穿戴钟表' },
                    { value: '4', label: '母婴' },
                    { value: '5', label: '汽车用品' },
                    { value: '6', label: '智能玩具' },
                    { value: '7 ', label: '数码设备' },
                    { value: '8', label: '运动装备' },
                    { value: '9', label: '其它' }
                ],
                // 弹出层数据
                modal: {
                    iotProduct: {
                        isShow: false,
                        loading: true,
                        type: "create", // create 新建，update 修改
                        title: "新建",
                        // rules: {
                        //     name: [
                        //         {
                        //             required: true,
                        //             message: "请填写系统名称",
                        //             trigger: "blur"
                        //         }
                        //     ],
                        //     url: [
                        //         {
                        //             required: true,
                        //             message: "请填写URL",
                        //             trigger: "blur"
                        //         }
                        //     ]
                        // },
                        formData: {}
                    }
                },
                // 列表
                list: {
                    loading: false,
                    selections: [],
                    // 列表展示数据
                    tableData: [],
                    // 表格表头
                    columns: [
                        {
                            type: "selection",
                            minWidth: 60,
                            align: "center"
                        },
                        /** 开始自动生成 */
                        // {
                        //     title: "产品ID",
                        //     key: "id"
                        // },
                        // {
                        //     title: "所属用户ID",
                        //     key: "userid"
                        // },
                        {
                            title: "产品名称",
                            key: "productName",
                            minWidth: 100,
                        },
                        {
                            title: "产品行业",
                            key: "ptype",
                            minWidth: 100,
                        },
                        {
                            title: "产品类别",
                            key: "type",
                            minWidth: 100
                        },
                        {
                            title: "移动(Apikey)",
                            key: "apikey",
                            minWidth: 100
                        },
                        {
                            title: "产品简介",
                            key: "description",
                            minWidth: 100
                        },
                        {
                            title: "操作系统",
                            key: "os",
                            minWidth: 100
                        },
                        {
                            title: "网络运营商",
                            key: "ps",
                            minWidth: 100
                        },
                        {
                            title: "设备接入方式",
                            key: "atype",
                            minWidth: 100
                        },
                        {
                            title: "联网方式",
                            key: "ctype",
                            minWidth: 100
                        },
                        {
                            title: "接入协议",
                            key: "protocol",
                            minWidth: 100
                        },
                        {
                            title: "创建时间",
                            key: "crtTime",
                            minWidth: 100,
                            render: (h, params) => {
                                let formatString = "YYYY-MM-DD HH:mm:ss";
                                return moment.unix(params.row.crtTime / 1000).format(formatString);
                            }
                        },
                        // {
                        //     title: "修改时间",
                        //     key: "updTime",
                        //     render: (h, params) => {
                        //         let formatString = "YYYY-MM-DD HH:mm:ss";
                        //         return moment.unix(params.row.updTime / 1000).format(formatString);
                        //     }
                        // },
                        /** 自动生成结束 */
                        {
                            title: "操作",
                                    align: "center",
                                minWidth: 130,
                                render: (h, params) => {
                            return h("div", { class: "action-group" }, [
                                // h("Button", {
                                //             props: {
                                //                 type: "ghost",
                                //                 size: "small"
                                //             },
                                //             class: "mr-20",
                                //             on: {
                                //                 click: () => {
                                //                 // this.showUpdateModal(params.index);
                                //                 this.showUpdateModal(params.row.id);
                                //                 }
                                //             }
                                //         },
                                //     [h("Icon", { props: { type: "edit", size: 14 } })]
                                // ),
                                h(
                                  'Tooltip',
                                  {
                                    props: {
                                      placement: 'left',
                                      content: '编辑'
                                    },
                                    style: {
                                      cursor: 'pointer'
                                    }
                                  },
                                  [
                                    h(
                                      'Button',
                                      {
                                        props: {
                                          type: 'primary',
                                          size: 'small'
                                        },
                                        style: {
                                          marginRight: '5px',
                                          padding: '1px 2px'
                                        },
                                        on: {
                                          click: () => {
                                            this.showUpdateModal(params.row.id)
                                          }
                                        }
                                      },
                                      [
                                        h('Icon', {
                                          props: {
                                            type: ' iconfont icon-bianjisekuai',
                                            size: 18
                                          }
                                        })
                                      ]
                                    )
                                  ]
                                ),
                                
                                // h("Button", {
                                //             props: {
                                //                 type: "ghost",
                                //                 size: "small"
                                //             },
                                //             class: "",
                                //             on: {
                                //                 click: () => {
                                //                 this.delData([params.row.id]);
                                //                 }
                                //             }
                                //         },
                                // [h("Icon", { props: { type: "trash-a", size: 14 } })]
                                // )
                                h(
                                  'Tooltip',
                                  {
                                    props: {
                                      placement: 'right',
                                      content: '删除'
                                    },
                                    style: {
                                      cursor: 'pointer'
                                    }
                                  },
                                  [
                                    h(
                                      'Button',
                                      {
                                        props: {
                                          type: 'error',
                                          size: 'small'
                                        },
                                        style: {
                                          marginRight: '5px',
                                          padding: '1px 2px'
                                        },
                                        on: {
                                          click: () => {
                                            this.delData([params.row.id])
                                          }
                                        }
                                      },
                                      [
                                        h('Icon', {
                                          props: {
                                            type: ' iconfont icon-shanchusekuai',
                                            size: 18
                                          }
                                        })
                                      ]
                                    )
                                  ]
                                )
                                ]);
            }
            }
        ]
        },
            // 页面查询数据
            queryData: {
                limit: 10,
                        page: 1,
                        totalRecord: 0,
                        name: ""
            }
        };
        },
        methods: {
            // 获取列表
            getTableData() {
                const that = this;
                that.queryData.totalRecord = undefined;
                IotProductApi.getPageList(that.queryData)
                        .then(res => {
                    that.list.tableData = res.data.list;
                that.queryData.totalRecord = res.data.totalRecord;
                that.queryData.page = res.data.page;
                that.queryData.limit = res.data.pageSize;
            })
            .catch(error => {
                    Message.error(error);
            });
            },

            // 新建&修改
            postData() {
                const that = this;
                that.$refs["systemFrom"].validate(valid => {
                    if (valid) {
                        if (!that.modal.iotProduct.formData.id) {// 新建
                            IotProductApi.add(that.modal.iotProduct.formData)
                                    .then(res => {
                                that.modal.iotProduct.isShow = false;
                            that.modal.iotProduct.loading = false;
                            if (!res.code) {
                                that.getTableData();
                                that.$Notice.success({
                                    title: "保存成功!"
                                });
                            } else {
                                that.$Notice.error({
                                    title: res.message
                                });
                            }
                        })
                        .catch(error => {
                                Message.error(error);
                        });
                        } else {// 修改
                            IotProductApi.update(
                                    that.modal.iotProduct.formData.id,
                                    that.modal.iotProduct.formData
                            )
                                    .then(res => {
                                that.modal.iotProduct.isShow = false;
                            that.modal.iotProduct.loading = false;
                            if (!res.code) {
                                that.getTableData();
                                that.$Notice.success({
                                    title: "保存成功!"
                                });
                            } else {
                                that.$Notice.error({
                                    title: res.message
                                });
                            }
                        })
                        .catch(error => {
                                Message.error(error);
                        });
                        }
                    } else {
                        that.modal.iotProduct.loading = false;
                that.$nextTick(() => {
                    that.modal.iotProduct.loading = true;
            });
            }
            });
            },

            // 删除
            delData(ids) {
                if (!ids.length) {
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content:
                    "<p>您确认删除id为 <strong>" +
                    ids.toString() +
                    "</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>",
                    loading: true,
                    onOk: () => {
                    IotProductApi.del({
                    ids: ids
                }).then(res => {
                    this.$Modal.remove();
                if (!res.code) {
                    this.$Notice.success({
                        title: "删除成功"
                    });
                    this.queryData.page = 1;
                    this.getTableData();
                } else {
                    this.$Notice.error({
                        title: res.message
                    });
                }
            });
            }
            });
            },

            // 排量删除
            batchDel() {
                let ids = [];
                this.list.selections.forEach(element => {
                    ids.push(element.id);
            });
                if (!ids.length) {
                    this.$Message.error({
                        content: "请先选择要删除的项！",
                        duration: 3
                    });
                }
                this.delData(ids);
            },

            // 全选，不全选
            selectionChange(args) {
                this.list.selections = args;
            },

            //每页显示记录数变更
            onPageSizeChange(pageSize) {
                this.queryData.limit = pageSize;
                this.getTableData();
            },

            // 换页
            changePage(page) {
                this.queryData.page = page;
                this.getTableData();
            },

            // 显示新建弹窗
            showCreateModal() {
                this.modal.iotProduct.type = "create";
                this.modal.iotProduct.title = "新建";
                this.modal.iotProduct.formData = {};
                this.modal.iotProduct.isShow = true;
            },

            // 显示修改弹窗
            showUpdateModal(id) {
                this.modal.iotProduct.type = "update";
                this.modal.iotProduct.title = "修改";
                //不请求后端，直接list取对象
                // this.modal.iotProduct.formData = JSON.parse(
                //   JSON.stringify(this.list.tableData)
                // )[index];
                const that = this;
                IotProductApi.getDetail(id).then(res => {
                    that.modal.iotProduct.formData = res.data;
            })
            .catch(error => {
                    Message.error(error);
            });
                this.modal.iotProduct.isShow = true;
            }
        },

        created() {
            this.getTableData();
        }
    };
</script>
